.media-container
  margin: 0 auto

.media-container form.media
  margin: 0 auto
  max-width: 450px
  text-align: center
  padding: 4rem 0.5rem 1rem

  display: flex
  flex-direction: column

  .form-item
    position: relative
    margin-bottom: 1rem

    video
      border-radius: 4px
      background-color: rgba(black, 0.3)
      display: block
      max-height: 200px

  label
    position: absolute
    bottom: 0.25rem
    left: 0
    right: 0
    opacity: 0
    color: #D35731
    font-size: 0.8rem
    width: 100%
    display: block
    pointer-events: none
    transition: opacity 100ms ease-in

  label.label-error
    opacity: 1

  select, input
    padding: 15px 10px
    -webkit-appearance: none
    -moz-appearance: none
    //  Remove default arrow
    appearance: none
    border: 2px solid transparent
    border-radius: 4px
    border-bottom: 2px solid darken(#fff, 10%)
    color: black
    background-color: white
    width: 100%
    transition: border-radius 100ms ease-in, border-color 100ms ease-in

  input.error
    border: 2px solid #D35731

  select
    cursor: pointer
    &:hover
      background-color: darken(white, 5%)

    &:active
      background-color: darken(white, 10%)

  select, input, button
    font-size: 1.2rem

  button
    @include button($color-primary, $color-warning)
    padding: 1rem
    margin-bottom: 1rem

  a.button-abort
    font-size: 1.2rem
    text-decoration: none
    @include button($color-primary, $color-error)
    padding: 1rem
    margin-bottom: 1rem

  .network-info
    font-size: 0.8rem
    border-radius: 0.5rem
    color: white
    text-shadow: 0 0 2px black
